<template>
  <t-dialog
    v-model:visible="show"
    :width="1200"
    :header="$t('common.info')"
    :footer="false"
    destroyOnClose
    :closeOnOverlayClick="false"
    class="plugin-goods-inbound-info"
    placement="center"
  >
    <template #body>
      <div class="content">
        <t-row :gutter="20">
          <t-col :span="8">
            <div class="bg-box" style="min-height: 700px; margin:0;">
              <div class="title">{{ plugin.t('inbound.tabs.1') }}</div>
              <Table :data="data" />
            </div>
          </t-col>
          <t-col :span="4">
            <div class="bg-box">
              <div class="title">{{ plugin.t('inbound.tabs.0') }}</div>
              <div class="item wrap">
                <div class="name">{{ plugin.t('inbound.account_name') }}</div>
                {{ data.account_name }}
              </div>
              <div class="item wrap">
                <div class="name">{{ plugin.t('inbound.supplier_name') }}</div>
                {{ data.supplier_name }}
              </div>
              <div class="item wrap">
                <div class="name">{{ plugin.t('inbound.code') }}</div>
                {{ data.code }}
              </div>
              <div class="item wrap">
                <div class="name">{{ plugin.t('inbound.name') }}</div>
                {{ data.name }}
              </div>
              <div class="item wrap">
                <div class="name">{{ plugin.t('inbound.count') }}</div>
                <b>{{ data.count }}</b>
              </div>
              <div class="item wrap">
                <div class="name">{{ plugin.t('inbound.time') }}</div>
                {{ data.created_at.date() }}
              </div>
            </div>
          </t-col>
        </t-row>
      </div>
    </template>
  </t-dialog>
</template>
<script setup>
  import { ref } from 'vue'
  import app from '@/app'
  import index from '../../../index'
  import Table from './table.vue'

  const plugin = index.plugin
  const show = ref(false)
  const data = ref({})

  const open = row => {
    data.value = row
    show.value = true
  }

  defineExpose({ open })
</script>
<style lang="scss">
  @import '@/style/global';

  .plugin-goods-inbound-info{
    @include table-size(12px);

    .content{
      overflow: hidden;
    }

    .t-dialog{
      background-color: $color-bg;
    }

    .bg-box{
      padding: 25px;
    }

    .title{
      color: $color-title;
      font-size: 16px;
      padding-bottom: 15px; 
      font-weight: bold;
    }

    .item{  
      color: $color-title;
      font-size: 14px;
      line-height: 20px;
      margin-bottom: 10px;
      text-align: right;
      
      .name{
        color: $color-body;
        float: left;
        padding-right: 20px;
      }

      span.color{
        color: $color;
      }
    }
  }
</style>